<template>
  <el-form
    ref="deliveryFormRecord"
    :model="sizeForm"
    label-width="80px"
    class="delivery main-content"
  >
    <el-form-item label="快递类别:" prop="type">
      <el-radio-group v-model="sizeForm.type" size="small">
        <el-radio border label="zsWord">证书</el-radio>
        <el-radio border label="fpWord">发票</el-radio>
        <el-radio border label="htWord">合同</el-radio>
        <el-radio border label="other">其他</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="快递公司:" prop="company">
      <el-radio-group v-model="sizeForm.company" size="small">
        <el-radio border label="sfWord">顺丰快递</el-radio>
        <el-radio border label="jdWord">京东快递</el-radio>
        <el-radio border label="dbWord">德邦物流</el-radio>
        <el-radio border label="stWord">申通快递</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="快递单号" prop="did">
      <el-input v-model="sizeForm.did"></el-input>
    </el-form-item>
    <el-form-item label="邮寄日期" prop="time">
      <el-date-picker
        v-model="sizeForm.time"
        type="datetime"
        class="delivery-time"
        placeholder="选择邮寄时间"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="客户名称" prop="name">
      <el-input v-model="sizeForm.name"></el-input>
    </el-form-item>
    <el-form-item label="联系人" prop="contact">
      <el-input v-model="sizeForm.contact"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="phone">
      <el-input v-model="sizeForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="详细地址" prop="address">
      <el-input type="textarea" v-model="sizeForm.address"></el-input>
    </el-form-item>
    <el-form-item label="备注" prop="mark">
      <el-input type="textarea" v-model="sizeForm.mark"></el-input>
    </el-form-item>
    <el-form-item size="large">
      <el-button type="primary" @click="onSubmit">{{
        this.id ? "立即更新" : "立即提交"
      }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import moment from "moment";
import {
  addDelivery,
  getDeliveryDetail,
  updateDelivery,
} from "../../api/delivery";
const SIZEFORM = {
  did: "",
  company: "",
  time: "",
  type: "",
  name: "",
  contact: "",
  phone: "",
  address: "",
  mark: "",
};
export default {
  data() {
    return {
      sizeForm: SIZEFORM,
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  created() {
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    async getDetail() {
      const res = await getDeliveryDetail({ id: this.id });
      const { code, data } = res?.data;
      if (code === 0) {
        this.sizeForm = data;
      }
    },
    async onSubmit() {
      const userInfo = this.$store.state.userInfo;
      const param = {
        ...this.sizeForm,
        time: moment(this.sizeForm.time).format("YYYY-MM-DD HH:mm:ss"),
        registrar: userInfo.username,
      };
      const res = this.id
        ? await updateDelivery({ id: this.id, ...this.sizeForm })
        : await addDelivery(param);
      const { code, message } = res?.data;
      if (code === 0) {
        this.$message({
          message,
          type: "success",
        });
        this.$refs["deliveryFormRecord"].resetFields();
        if (this.id) {
          this.$router.push("/delivery/search");
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.delivery {
  height: 100%;

  /deep/ .el-input,
  /deep/ .el-textarea {
    width: 600px;
  }
}
</style>